<template>
   <!-- 内容详情页 -->
  <section class="productDetail">
      <aside class="aside">
          <div class="tabWraped">
              <h4 class="active">相关分类</h4>
              <h4>推荐品牌</h4>
          </div>
          <div class="tabContent">
              <div class="tab-pane active">
                  <ul class="partList">
                      <li>手机</li>
                      <li>手机壳</li>
                      <li>内存卡</li>
                      <li>Iphone配件</li>
                      <li>贴膜</li>
                      <li>手机耳机</li>
                      <li>移动电源</li>
                      <li>平板电脑</li>
                  </ul>
                  <ul class="goodsList">
                      <li>
                          <div class="list-wrap">
                              <div class="p-img">
                                  <img src="@/assets/images/part01.png" />
                              </div>
                              <div class="attr">Apple苹果iPhone 6s (A1699) </div>
                              <div class="price">
                                  <em>¥</em>
                                  <i>6088.00</i>
                              </div>
                              <div class="operate">
                                  <a href="javascript:void(0);">加入购物车</a>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="list-wrap">
                              <div class="p-img">
                                  <img src="@/assets/images/part02.png" />
                              </div>
                              <div class="attr">
                                  <em>Apple苹果iPhone 6s (A1699)</em>
                              </div>
                              <div class="price">
                                  <strong>
                                      <em>¥</em>
                                      <i>6088.00</i>
                                  </strong>
                              </div>
                              <div class="operate">
                                  <a href="javascript:void(0);">加入购物车</a>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="list-wrap">
                              <div class="p-img">
                                  <img src="@/assets/images/part03.png" />
                              </div>
                              <div class="attr">
                                  <em>Apple苹果iPhone 6s (A1699)</em>
                              </div>
                              <div class="price">
                                  <strong>
                                      <em>¥</em>
                                      <i>6088.00</i>
                                  </strong>
                              </div>
                              <div class="operate">
                                  <a href="javascript:void(0);">加入购物车</a>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="list-wrap">
                              <div class="p-img">
                                  <img src="@/assets/images/part02.png" />
                              </div>
                              <div class="attr">
                                  <em>Apple苹果iPhone 6s (A1699)</em>
                              </div>
                              <div class="price">
                                  <strong>
                                      <em>¥</em>
                                      <i>6088.00</i>
                                  </strong>
                              </div>
                              <div class="operate">
                                  <a href="javascript:void(0);">加入购物车</a>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="list-wrap">
                              <div class="p-img">
                                  <img src="@/assets/images/part03.png" />
                              </div>
                              <div class="attr">
                                  <em>Apple苹果iPhone 6s (A1699)</em>
                              </div>
                              <div class="price">
                                  <strong>
                                      <em>¥</em>
                                      <i>6088.00</i>
                                  </strong>
                              </div>
                              <div class="operate">
                                  <a href="javascript:void(0);">加入购物车</a>
                              </div>
                          </div>
                      </li>
                  </ul>
              </div>
              <div class="tab-pane">
                  <p>推荐品牌</p>
              </div>
          </div>
      </aside>
      <div class="detail">
          <div class="fitting">
              <h4 class="kt">选择搭配</h4>
              <div class="good-suits">
                  <div class="master">
                      <img src="@/assets/images/l-m01.png" />
                      <p>￥5299</p>
                      <i>+</i>
                  </div>
                  <ul class="suits">
                      <li class="suitsItem">
                          <img src="@/assets/images/dp01.png" />
                          <p>Feless费勒斯VR</p>
                          <label>
                              <input type="checkbox" value="39">
                              <span>39</span>
                          </label>
                      </li>
                      <li class="suitsItem">
                          <img src="@/assets/images/dp02.png" />
                          <p>Feless费勒斯VR</p>
                          <label>
                              <input type="checkbox" value="50">
                              <span>50</span>
                          </label>
                      </li>
                      <li class="suitsItem">
                          <img src="@/assets/images/dp03.png" />
                          <p>Feless费勒斯VR</p>
                          <label>
                              <input type="checkbox" value="59">
                              <span>59</span>
                          </label>
                      </li>
                      <li class="suitsItem">
                          <img src="@/assets/images/dp04.png" />
                          <p>Feless费勒斯VR</p>
                          <label>
                              <input type="checkbox" value="99">
                              <span>99</span>
                          </label>
                      </li>
                  </ul>
                  <div class="result">
                      <div class="num">已选购0件商品</div>
                      <div class="price-tit">
                          套餐价
                      </div>
                      <div class="price">￥5299</div>
                      <button class="addshopcar">加入购物车</button>
                  </div>
              </div>
          </div>
          <div class="intro">
              <ul class="tab-wraped">
                  <li class="active">
                      <a href="###">
                          商品介绍
                      </a>
                  </li>
                  <li>
                      <a href="###">
                          规格与包装
                      </a>
                  </li>
                  <li>
                      <a href="###">
                          售后保障
                      </a>
                  </li>
                  <li>
                      <a href="###">
                          商品评价
                      </a>
                  </li>
                  <li>
                      <a href="###">
                          手机社区
                      </a>
                  </li>
              </ul>
              <div class="tab-content">
                  <div id="one" class="tab-pane active">
                      <ul class="goods-intro">
                          <li>分辨率：1920*1080(FHD)</li>
                          <li>后置摄像头：1200万像素</li>
                          <li>前置摄像头：500万像素</li>
                          <li>核 数：其他</li>
                          <li>频 率：以官网信息为准</li>
                          <li>品牌： Apple</li>
                          <li>商品名称：APPLEiPhone 6s Plus</li>
                          <li>商品编号：1861098</li>
                          <li>商品毛重：0.51kg</li>
                          <li>商品产地：中国大陆</li>
                          <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                          <li>系统：苹果（IOS）</li>
                          <li>像素：1000-1600万</li>
                          <li>机身内存：64GB</li>
                      </ul>
                      <div class="intro-detail">
                          <img src="@/assets/images/intro01.png" />
                          <img src="@/assets/images/intro02.png" />
                          <img src="@/assets/images/intro03.png" />
                      </div>
                  </div>
                  <div id="two" class="tab-pane">
                      <p>规格与包装</p>
                  </div>
                  <div id="three" class="tab-pane">
                      <p>售后保障</p>
                  </div>
                  <div id="four" class="tab-pane">
                      <p>商品评价</p>
                  </div>
                  <div id="five" class="tab-pane">
                      <p>手机社区</p>
                  </div>
              </div>
          </div>
      </div>
  </section>
</template>

<script>
export default {
  name: 'ProductDetail'
}
</script>

<style lang="scss" scoped>
.productDetail{
    width: 1200px;
    margin: 30px auto 0;
    overflow: hidden;
    .aside{
        width: 210px;
        float: left;
        border: 1px solid #ccc;
        .tabWraped{
            height: 40px;
            h4{
                border-top: 3px solid #fff;
                float: left;
                line-height: 37px;
                width: 105px;
                text-align: center;
                border-bottom: 1px solid #ccc;
                &.active{
                    border-top: 3px solid #e1251b;
                    border-bottom: 0;
                    font-weight: normal;
                }
            }
        }
        .tabContent{
            padding: 10px;
            .tab-pane{
                display: none;
                &.active{
                    display: block;
                }
                &:nth-child(1){
                    .partList{
                        overflow: hidden;
                        li{
                            width: 50%;
                            float: left;
                            border-bottom: 1px dashed #ededed;
                            line-height: 28px;
                        }
                    }
                    .goodsList{
                        &>li{
                            margin: 5px 0 15px;
                            border-bottom: 1px solid #ededed;
                            padding-bottom: 5px;
                            .list-wrap{
                                .p-img{
                                    text-align: center;
                                    img{
                                        width: 152px;
                                    }
                                }
                                .price{
                                    font-size: 16px;
                                    color: #c81623;
                                }
                                .operate {
                                    text-align: center;
                                    margin: 5px 0;
                                    a{
                                        background-color: transparent;
                                        border: 1px solid #8c8c8c;
                                        color: #8c8c8c;
                                        display: inline-block;
                                        padding: 2px 14px;
                                        line-height: 18px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .detail{
        width: 980px;
        float: right;
        .fitting{
            border: 1px solid #ddd;
            margin-bottom: 15px;
            .kt{
                border-bottom: 1px solid #ddd;
                background: #f1f1f1;
                color: #333;
                padding: 5px 0 5px 15px;
            }
            .good-suits{
                height: 170px;
                padding-top: 10px;
                .master{
                    width: 127px;
                    height: 165px;
                    text-align: center;
                    position: relative;
                    float: left;
                    img{
                        width: 87px;
                    }
                    p{
                        color: #c81623;
                        font-size: 16px;
                        font-weight: 700;
                    }
                    i {
                        position: absolute;
                        top: 48px;
                        right: -25px;
                        font-size: 16px;
                    }
                }
                .suits{
                    width: 668px;
                    height: 165px;
                    float: left;
                    .suitsItem{
                        float: left;
                        width: 127px;
                        padding: 0 20px;
                        text-align: center;
                        img{
                            width: 120px;
                            height: 130px;
                        }
                        p{
                            font-size: 12px;
                        }
                        label{
                            display: block;
                            position: relative;
                            input{
                                vertical-align: middle;
                            }
                            span{
                                vertical-align: middle;
                            }
                        }
                    }
                }
                .result{
                    border-left: 1px solid #ddd;
                    width: 153px;
                    height: 165px;
                    padding-left: 20px;
                    float: left;
                    .num{
                        font-size: 14px;
                        margin-bottom: 10px;
                        margin-top: 10px;
                    }
                    .price-tit{
                        font-weight: bold;
                        margin-bottom: 10px;
                    }
                    .price {
                        color: #B1191A;
                        font-size: 16px;
                        margin-bottom: 10px;
                    }
                    .addshopcar{
                        background-color: #e1251b;
                        border: 1px solid #e1251b;
                        padding: 10px 25px;
                        font-size: 16px;
                        color: #fff;
                        display: inline-block;
                        box-sizing: border-box;
                    }
                }
            }
        }
        .intro{
            .tab-wraped {
                background: #ededed;
                // border: 1px solid #ddd;
                overflow: hidden;
                li{
                    float: left;
                    & + li > a {
                        border-left: 1px solid #ddd;
                    }
                    &.active{
                        a{
                            // border: 0;
                            background: #e1251b;
                            color: #fff;
                        }
                    }
                    a{
                        display: block;
                        height: 40px;
                        line-height: 40px;
                        padding: 0 11px;
                        text-align: center;
                        color: #666;
                        background: #fcfcfc;
                        border-top: 1px solid #ddd;
                        border-bottom: 1px solid #ddd;
                    }
                }
            }
            .tab-content{
                .tab-pane{
                    display: none;
                    &.active{
                        display: block;
                    }
                    &:nth-child(1){
                        .goods-intro{
                            padding-left: 10px;
                            li{
                                margin: 10px 0;
                            }
                        }
                        .intro-detail{
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
